<script setup lang="ts" name="home">
import { ref, onMounted } from 'vue';
import "animate.css";

const contentRef = ref<HTMLDivElement | null>(null);
onMounted(() => {
    contentRef.value!.style.width = window.innerWidth + 'px';
    contentRef.value!.style.height = document.documentElement.clientHeight - 60 + 'px';
});
</script>

<template>
    <div class="home">
        <div class="content" ref="contentRef">
            <div class="container">
                <h1 class="title animate__animated animate__slideInDown" >
                    <div id="firstLetter" class="animate__animated animate__rotateIn animate__delay-1s">v</div>
                    <div id="text">ocational</div>
                    <div id="firstLetter" class="animate__animated animate__rotateInUpRight animate__delay-1s">W</div>
                    <div id="text">ork</div>
                </h1>
                <div class="text animate__animated animate__lightSpeedInRight ">开启你的前端学习之旅</div>
                <div class="text animate__animated animate__lightSpeedInLeft">让我们一起探索前端开发的奥秘</div>
                <div class="text animate__animated animate__lightSpeedInRight">一起加油，成为前端大咖！</div>
                <div class="btn">
                    <button class="explore animate__animated animate__fadeIn animate__delay-1s">
                        <span>开始探索</span>
                        <span class="iconfont icon-qianwang_qianwang arrow"></span>
                    </button>
                    <button class="more animate__animated animate__fadeIn animate__delay-1s">了解更多</button>
                </div>
            </div>                
        </div>
        <div class="footer">
            <div class="container">
                <div class="left">
                    <div class="item">
                        <a href="#">关于我们</a>
                        <a href="#">隐私政策</a>
                        <a href="#">使用条款</a>
                        <a href="#">帮助中心</a>                        
                    </div>
                </div>
                <div class="right">
                    <div class="item">
                        <a href="/">
                            <img src="@/assets/imgs/juejin.webp" loading="lazy" alt="">
                            <span>稀土掘金</span>                            
                        </a>
                        <a href="/">
                            <img src="@/assets/imgs/github.webp" loading="lazy" alt="">
                            <span>GitHub</span>                            
                        </a>
                        <a href="/">
                            <img src="@/assets/imgs/gitlab.webp" loading="lazy" alt="">
                            <span>GitLab</span>                            
                        </a>
                        <a href="/">
                            <img src="@/assets/imgs/gitee.webp" loading="lazy" alt="">
                            <span>Gitee</span>                            
                        </a>
                    </div>                
                </div>
            </div>
            <div class="bottom">
                <div class="item">
                    <span>Copyright © 2025 前端学习，css，html，js，业务，前端</span>
                </div>
            </div>
        </div>        
    </div>
</template>

<style scoped lang="scss">
@use "./style.scss";
</style>